<template>
  <div class="heads">
    <p><button @click="toloding()">登录</button><button>注册</button></p>
    <div class="header1">
      <img :src="Logo" alt="" />
    </div>
    <div class="header2">
      <el-input @keydown.enter="searchInput()"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model.lazy.trim="input"/>
    </div>
    <div class="header3">
      <el-button type="danger">点击发布闲置物品</el-button>
    </div>
  </div>
</template>

<script>
import logo from "../assets/logo.png";
import { ref } from "vue";
import { useRouter } from 'vue-router'
export default {
  name:'Header',
  data() {
    return {
      
    }
  },
  setup() {
    const router=useRouter()
    const input = ref("裤子");
    const Logo = ref(logo);

    function toloding() {
      router.push("/login")
    }
    return {
      input,
      Logo,
      toloding
    };
  },
  methods:{
    searchInput(){
      const item = {
        name:this.input
      }
      this.$axios.post(`api/profile/text`,{
        name:this.input
      })
        .then(res=>{
          this.outputValue = res.data
          this.$store.commit('addSearch',this.outputValue)
      })   
      // bus.emit('InputName', this.input1) 
      this.$router.push({path:'/searchBar',query:{OutputValue:this.outputValue,InputValue:this.input}})
    },    
  }
};
</script>


<style lang="scss" >
.heads {
  width: 100%;
  height: 150px;
  p {
    height: 25px;
    margin: 0;

    button {
      padding-top: 5px;
      background-color: white;
      border: 0;
      position: relative;
      margin-left: 15px;
      left: 32%;
      color: grey;
    }
    button:hover {
      color: #f56c6c;
    }
  }
}
.header1 {
  width: 25% !important;
  height: 125px;
  float: left;
  img {
    height: 100%;
    width: 80%;
  }
}

.header2 {
  width: 50%;
  height: 125px;
  float: left;

  .el-input {
    width: 60%;
    position: relative;
    left: 20%;
    top: 30%;
    transform: translate(-30%, -50%);
  }
}
.header3 {
  width: 25%;
  height: 125px;
  float: left;
}
.el-button--danger {
  width: 55%;
  position: relative;
  left: 10%;
  top: 30%;
  transform: translate(-50%, -50%);
}

@media screen and(max-width:400px) {
  .el-button--danger {
    font-size: 11px !important;
    width: 90px !important;
    transform: translate(-12%, -50%) !important;
    padding: 0 !important;
  }
  .heads {
    p {
      button {
        margin-left: 5px !important;
        left: 36% !important;
      }
    }
  }

  .el-input{
    width: 70% !important;
  }
  img{
    width: 80% !important;
    height: 80% !important;
  }
}
</style>